import React, { Component } from 'react';
// import { Route, Switch, Redirect } from 'react-router-dom';
import GlobalNav from '@/components/base/GlobalNav';
import Footer from '@/components/base/Footer';

import './Kind.scss';
class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      list:[],
      minheight:false
    }
  }
  componentDidMount () {
    let fname = JSON.parse(localStorage.getItem('f_name'))
    this.setState({
      fname:fname
    })
  }
  show (event) {
    
    this.setState({
      minheight: ! this.state.minheight
    })
    //  console.log(event.target)
    event.target.parentNode.parentNode.style.height=(this.state.minheight) ? '200px' : 'auto'
    
  }
    list1 () {
      let family = this.refs.family.innerHTML
      localStorage.setItem('f_name', JSON.stringify(family))
      this.props.history.push('/fkind/navv')
    }
    list2 () {
      let kuai = this.refs.kuai.innerHTML
      localStorage.setItem('f_name', JSON.stringify(kuai))
      this.props.history.push('/fkind/navv')
    }
    list3 () {
      let xia = this.refs.xia.innerHTML
      localStorage.setItem('f_name', JSON.stringify(xia))
      this.props.history.push('/fkind/navv')
    }
    list4 () {
      let f_name = this.refs.tang.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list5 () {
      let f_name = this.refs.tang.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list6 () {
      let f_name = this.refs.feiniu.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list7 () {
      let f_name = this.refs.jichi.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list8 () {
      let f_name = this.refs.fanqie.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list9 () {
      let f_name = this.refs.tudou.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list10 () {
      let f_name = this.refs.bocai.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list11 () {
      let f_name = this.refs.jidan.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list12 () {
      let f_name = this.refs.luobo.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list13 () {
      let f_name = this.refs.binggan.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list14 () {
      let f_name = this.refs.yatui.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list15 () {
      let f_name = this.refs.yangtui.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list16 () {
      let f_name = this.refs.jitui.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list17 () {
      let f_name = this.refs.jichi.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list18 () {
      let f_name = this.refs.niunan.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list19 () {
      let f_name = this.refs.fanqie.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list20 () {
      let f_name = this.refs.qiezi.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
    list21 () {
      let f_name = this.refs.jiucai.innerHTML
      localStorage.setItem('f_name', JSON.stringify(f_name))
      this.props.history.push('/fkind/navv')
    }
  render () {
    
    return (
      <div className = "container">
        <div className="header">
          <GlobalNav {...this.props}/>
         </div>
        <div className="section">
          <div className="Kind_Header">
              分类浏览
          </div>
          <div className="Kind_main">
            <div className="Kind_main_speical" >
                <b>热门专题</b>
                <div className="Kind_main_ul">
                    <ul>
                      <li className="Kind_main_li">特色食品</li>
                      <li onClick={this.list6.bind(this)} ref="feiniu">肥牛</li>
                      <li onClick={this.list7.bind(this)} ref="jichi">鸡翅</li>
                      <li>沙拉</li>
                      <li>凉菜</li>
                    </ul>
                    <ul>
                      <li className="Kind_main_li">特殊场合</li>
                      <li onClick={this.list8.bind(this)} ref="fanqie">番茄</li>
                      <li onClick={this.list4.bind(this)} ref="tang">汤羹</li>
                      <li>便当</li>
                      <li>圣诞节</li>
                    </ul>
                    <ul>
                      <li className="Kind_main_li">菜式</li>
                      <li onClick={this.list1.bind(this)} ref="family">家常菜</li>
                      <li onClick={this.list2.bind(this)} ref="kuai">快手菜</li>
                      <li onClick={this.list3.bind(this)} ref="xia">下饭菜</li>
                      <li>素菜</li>
                      <li>大鱼大肉</li>
                      <li>下酒菜</li>
                    </ul>
                    <ul>
                      <li className="Kind_main_li">功效</li>
                      <li>减肥</li>
                      <li>美容</li>
                      <li>润肺抗燥</li>
                    </ul>
                    <ul>
                      <li className="Kind_main_li">人群</li>
                      <li>儿童</li>
                      <li>婴幼儿</li>
                      <li>老人</li>
                    </ul>
                    <div className="all" onClick={ this.show.bind(this)}><i className="iconfont icon-triangle-bottom"></i> 展开全部</div>
                </div>
                
            </div>
            <div className="Kind_main_speical" >
                <b>洪培甜品饮料</b>
                <div className="Kind_main_ul">
                    <ul>
                      <li  onClick={this.list4.bind(this)} ref="hong">洪培</li>
                      <li onClick={this.list9.bind(this)} ref="tudou">土豆</li>
                      <li onClick={this.list10.bind(this)} ref="bocai">菠菜</li>
                      <li onClick={this.list13.bind(this)} ref="binggan">饼干</li>
                      <li>吐司</li>
                      <li>乳酪蛋糕</li>
                      <li>曲奇</li>
                    </ul>
                    <ul>
                      <li>甜品</li>
                      <li onClick={this.list11.bind(this)} ref="jidan">鸡蛋</li>
                      <li onClick={this.list12.bind(this)} ref="luobo">萝卜</li>
                      <li>果酱</li>
                      <li>糖水</li>
                      <li>冰淇淋</li>
                      <li>果冻</li>
                    </ul>
                    <ul>
                      <li>饮品</li>
                      <li  onClick={this.list4.bind(this)} ref="tang">汤羹</li>
                      <li > 豆浆</li>
                      <li>奶茶</li>
                      <li>酒</li>
                      <li>果汁</li>
                      <li>花草茶</li>
                    </ul>
                   
                    <div className="all" onClick={ this.show.bind(this)}>
                    <i className="iconfont icon-triangle-bottom"></i>展开全部
                    </div>
                </div>
                
            </div>
            <div className="Kind_main_speical" >
                <b>肉类</b>
                <div className="Kind_main_ul">
                    <ul>
                      <li onClick={this.list14.bind(this)} ref="yatui">鸭腿</li>
                      <li onClick={this.list15.bind(this)} ref="yangtui">羊腿</li>
                      <li>排骨</li>
                      <li>猪肉末</li>
                      <li>五花肉</li>
                      <li>猪蹄</li>
                      <li>肉丝</li>
                      <li>肋排</li>
                      <li>瘦肉</li>
                    </ul>
                    <ul>
                      <li onClick={this.list16.bind(this)} ref="jitui">鸡腿</li>
                      <li onClick={this.list17.bind(this)} ref="jichi">鸡翅</li>
                      <li>鸡胸</li>
                      <li>鸡腿</li>
                      <li>鸡翅中</li>
                      <li>鸡腿肉</li>
                      <li>鸡爪</li>
                    </ul>
                    <ul>
                      <li onClick={this.list6.bind(this)} ref="feiniu">牛</li>
                      <li onClick={this.list6.bind(this)} ref="feiniu">肥牛</li>
                      <li onClick={this.list18.bind(this)} ref="niunan">牛腩</li>
                      <li>牛排</li>
                      <li>牛肉</li>
                      <li>牛里脊</li>
                      <li>牛腱</li>
                    </ul>
                   
                    <div className="all" onClick={ this.show.bind(this)}><i className="iconfont icon-triangle-bottom"></i> 展开全部</div>
                </div>
                
            </div>
            <div className="Kind_main_speical" >
                <b>蔬菜水果</b>
                <div className="Kind_main_ul">
                    <ul>
                      <li className="Kind_main_li">果实类蔬菜</li>
                      <li onClick={this.list19.bind(this)} ref="fanqie">番茄</li>
                      <li onClick={this.list20.bind(this)} ref="qiezi">茄子</li>
                      <li>彩椒</li>
                      <li>南瓜</li>
                      <li>玉米</li>
                      <li>红椒</li>
                      <li>黄瓜</li>
                      <li>玉米粒</li>
                    </ul>
                    <ul>
                      <li className="Kind_main_li">根茎蔬菜</li>
                      <li onClick={this.list9.bind(this)} ref="tudou">土豆</li>
                      <li onClick={this.list12.bind(this)} ref="luobo">萝卜</li>
                      <li>紫薯</li>
                      <li>红薯</li>
                      <li>胡萝卜</li>
                      <li>山药</li>
                      <li>藕</li>
                      <li>芋头</li>
                    </ul>
                    <ul>
                      <li className="Kind_main_li">叶类蔬菜</li>
                      <li onClick={this.list10.bind(this)} ref="bocai">菠菜</li>
                      <li onClick={this.list21.bind(this)} ref="jiucai">韭菜</li>
                      <li>白菜</li>
                    </ul>
                    <ul>
                      <li className="Kind_main_li">菌菇类</li>
                      <li>香菇</li>
                      <li>杏鲍菇</li>
                      <li>银耳</li>
                    </ul>
                    
                    <div className="all" onClick={ this.show.bind(this)}><i className="iconfont icon-triangle-bottom"></i> 展开全部</div>
                </div>
                
            </div>
            
          </div>
          
        
        </div>
        <div className="foot">
          <Footer />
        </div>
      </div>
    )
  }
}

export default Com;
